<template>
<view class="maintains">
	<view class="mTitle">
		<view>大保养</view>
		<view>小保养</view>
	</view>
	<view class="mSubTitle">
		<view class="mSubTitle1"> <!-- v-for="item in array" -->
			<view class="image"><image src="../static/imgs/water.png"></image></view>
			<view class="text">发动机养护</view><!-- {{item.text}} -->
		</view>
		<view class="mSubTitle1"> 
			<view class="image" style="background:linear-gradient(180deg,rgba(254,217,132,1),rgba(255,152,87,1));"><image src="../static/imgs/youxiang.png"></image></view>
			<view class="text">燃油系统养护</view>
		</view>
		<view class="mSubTitle1"> 
			<view class="image" style="background:linear-gradient(0deg,rgba(71,196,120,1),rgba(154,239,227,1))"><image src="../static/imgs/paomo.png"></image></view>
			<view class="text">发动机舱清洗</view>
		</view>
		<view class="mSubTitle1"> 
			<view class="image" style="background:linear-gradient(180deg,rgba(112,212,255,1),rgba(41,155,251,1));"><image src="../static/imgs/yugua.png"></image></view>
			<view class="text">前雨刷</view>
		</view>
		<view class="mSubTitle1">
			<view class="image" style="background:linear-gradient(180deg,rgba(255,132,164,1),rgba(253,38,108,1));"><image src="../static/imgs/kongtiao.png"></image></view>
			<view class="text">空调系统养护</view>
		</view>
		<view class="mSubTitle1">
			<view class="image" style="background:linear-gradient(0deg,rgba(88,152,255,1),rgba(124,213,248,1));"><image src="../static/imgs/lengque.png"></image></view>
			<view class="text">冷却系统养护</view>
		</view>
		<view class="mSubTitle1">
			<view class="image" style="background:linear-gradient(0deg,rgba(234,64,61,1),rgba(251,138,115,1));"><image src="../static/imgs/duntai.png"></image></view>
			<view class="text">引擎系统养护</view>
		</view>
		<view class="mSubTitle1"> 
			<view class="image" style="background:linear-gradient(60deg,rgba(201,199,202,1),rgba(139,137,140,1));"><image src="../static/imgs/rose.png"></image></view>
			<view class="text">道路救援</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		data(){
			return{
				array:[
					{"text":"发动机养护"},
					{"text":"燃油系统养护"},
					{"text":"发动机舱清洗"},
					{"text":"发动机养护"},
					{"text":"发动机养护"},
					{"text":"发动机养护"},
					{"text":"发动机养护"},
					{"text":"发动机养护"}
				]
			}
		}
	}
</script>

<style>
.maintains{width:95%;margin:0 2.5%;border-radius: 20rpx;position:absolute;top:340rpx;background-color:#fff;box-shadow: 1rpx 2rpx 10rpx #ccc;}
.mTitle{display: flex;justify-content:space-around;border-bottom:2rpx solid #ccc;padding:30rpx 0;text-size:30rpx}
.mSubTitle{display: flex;justify-content:space-between;flex-wrap: wrap}
.mSubTitle1{width:147rpx;display:flex;flex-direction:column;align-items: center;margin:0 10rpx;margin:20rpx 0 30rpx}
.mSubTitle1 .image{width:100rpx;height:100rpx;display:flex;justify-content: center;align-items: center;margin:0 auto;background:linear-gradient(0deg,rgba(88,152,255,1),rgba(124,213,248,1));border-radius:50%;}
.mSubTitle1 .image image{width:60rpx;height:50rpx}
.mSubTitle1 .text{margin-top:10rpx;font-size:24rpx;text-align:center;color:rgba(129,129,129,1);}
</style>
